<template>
  <common-edit-dialog
    title="主题配置"
    :visible="isThemeDialog"
    :info-loading="isThemeLoading"
    @submit="submit"
    @cancel="cancel"
  >
    <div slot="default" class="theme-dialog-wrap">
      <div class="chosen-theme-wrap">
        <div
          class="chosen-theme-item-wrap"
          v-for="color in colors"
          :key="color"
        >
          <div class="color-preview" :style="{ backgroundColor: color }"></div>
          <div class="color-content">{{ color }}</div>
          <div class="color-delete-button">
            <el-button
              type="text"
              icon="el-icon-delete"
              style="color: #f56c6c"
              @click="del(color)"
            ></el-button>
          </div>
        </div>
      </div>
      <div class="all-theme-wrap">
        <div class="all-theme-list-wrap">
          <div
            class="theme-item-wrap"
            v-for="color in themeColors"
            :key="color"
            @click="change(color)"
            :style="{ backgroundColor: color }"
          ></div>
        </div>
      </div>
    </div>
  </common-edit-dialog>
</template>

<script>
import { themeList } from "@/api/screenConfig/themeConfig";

export default {
  name: "ThemeDialog",
  props: {
    color: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isThemeLoading: false,
      isThemeDialog: false,
      colors: [],
      themeColors: [],
    };
  },
  watch: {
    color: function () {
      this.handleColors();
    },
  },

  methods: {
    submit() {
      this.$emit("change", this.colors.join(","));
      this.cancel();
    },
    cancel() {
      this.isThemeDialog = false;
    },
    show() {
      this.isThemeDialog = true;
    },
    handleColors() {
      this.colors = this.color
        ? this.color.split(",").filter((c) => !!c)
        : [...this.themeColors];
    },
    change(color) {
      let index = this.colors.findIndex((c) => c === color);
      if (index === -1) {
        this.colors.unshift(color);
        if (this.colors.length > 8) this.colors.pop();
      } else {
        this.colors.splice(index, 1);
        this.colors.unshift(color);
      }
    },
    del(color) {
      if (this.colors.length === 1) {
        this.$GlobalErrorMessage("至少需要一个颜色!");
      } else {
        let index = this.colors.findIndex((c) => c === color);
        if (index > -1) this.colors.splice(index, 1);
      }
    },
    getThemeList() {
      this.isThemeLoading = true;
      this.commonGetThemeData()
        .then((theme) => {
          let { colors } = theme;
          this.themeColors = colors.split(",");
        })
        .finally(() => {
          this.isThemeLoading = false;
          this.handleColors();
        });
    },

    commonGetThemeData() {
      return new Promise((resolve, reject) => {
        themeList().then((res) => {
          if (res && res.code === 200) {
            if (res.rows && res.rows instanceof Array && res.rows.length > 0) {
              resolve(res.rows[0]);
            } else {
              reject(res);
            }
          } else {
            reject(res);
          }
        });
      });
    },
  },
  mounted() {
    this.getThemeList();
  },
};
</script>

<style scoped lang="scss">
.theme-dialog-wrap {
  height: 400px;
  display: flex;

  .chosen-theme-wrap {
    width: 199px;
    height: 100%;
    border-right: 1px solid #eee;
    padding-right: 18px;
    box-sizing: border-box;

    .chosen-theme-item-wrap {
      display: flex;
      align-items: center;
      height: 32px;
      position: relative;

      transition: all 0.15s linear;

      &:hover {
        background-color: #eee;

        .color-delete-button {
          display: inline;
        }
      }

      .color-preview {
        width: 18px;
        height: 18px;
      }

      .color-content {
        font-size: 14px;
        line-height: 14px;
        margin-left: 8px;
      }

      .color-delete-button {
        position: absolute;
        right: 8px;
        cursor: pointer;
        display: none;
      }
    }
  }

  .all-theme-wrap {
    height: 100%;
    width: calc(100% - 199px);
    padding: 4px 0 0 18px;
    box-sizing: border-box;

    .all-theme-list-wrap {
      display: flex;
      flex-wrap: wrap;

      .theme-item-wrap {
        width: 32px;
        height: 32px;
        margin: 0 12px 12px 0;
        cursor: pointer;
      }
    }
  }
}
</style>
